<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" inline v-show="showSearch" label-width="68px">
      <el-form-item label="设备名称" prop="equipmentName">
        <el-input
          v-model="queryParams.equipmentName"
          placeholder="请输入设备名称"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日期" prop="daterangeProductDate">
        <el-date-picker
          v-model="daterangeProductDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="equipmentPowerReportList">
      <el-table-column label="设备名称" align="center" prop="equipmentName" />
      <el-table-column label="日期" align="center" prop="productDate">
        <template #default="{ row }">
          <span>{{ parseTime(row.productDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已产数量" align="center" prop="productQuantity" />
      <el-table-column label="单位耗电量" align="center" prop="powerConsume" />
      <el-table-column label="总耗电量" align="center" prop="totalPowerConsume" />
      <el-table-column label="单位碳排放" align="center">
        <template #default="{ row }">{{ row.carbonEmission?.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column label="总碳排放" align="center">
        <template #default="{ row }">{{ row.totalCarbonEmission?.toFixed(2) }}</template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import { listEquipmentPowerReportByDay, exportEquipmentPowerReport } from '@/api/carbonReport/equipmentPowerReport'

// 响应式状态
const loading = ref(true)
const total = ref(0)
const equipmentPowerReportList = ref([])
const daterangeProductDate = ref([])
const showSearch = ref(true)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  equipmentName: null,
  params: {}
})

// 获取数据
const getList = async () => {
  try {
    loading.value = true
    const response = await listEquipmentPowerReportByDay(queryParams)
    equipmentPowerReportList.value = response.rows
    total.value = response.total
  } finally {
    loading.value = false
  }
}

// 日期范围变化处理
watch(daterangeProductDate, (newVal) => {
  queryParams.params = {
    beginProductDate: newVal?.[0] || null,
    endProductDate: newVal?.[1] || null
  }
})

// 查询处理
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  daterangeProductDate.value = []
  queryParams.equipmentName = null
  handleQuery()
}

// 导出处理
const handleExport = async () => {
  try {
    await ElMessageBox.confirm('是否确认导出所有数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const response = await exportEquipmentPowerReport(queryParams)
    console.log('执行下载:', response.msg)
  } catch (error) {
    console.log('取消导出')
  }
}

onMounted(() => {
  getList()
})
</script>
